<template>
  <div class="site-topbar">
    <div class="container w">
      <!-- 头部导航 -->
      <div class="left">
        <div class="topbar-nav">
          <router-link to="/">首页</router-link> <span> | </span>
          <router-link to="/allcategory">所有分类</router-link>
        </div>
      </div>
      <div class="right">
        <div class="topbar-info">
          <template v-if="show">
            <el-dropdown>
              <a href="javascript:;">{{ getUserinfo.username }}</a>
              <template #dropdown>
                <el-dropdown-menu>
                  <router-link to="/system">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                  </router-link>
                  <router-link to="/system/orders">
                    <el-dropdown-item>我的订单</el-dropdown-item>
                  </router-link>
                  <el-dropdown-item @click="logout">退出登陆</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <template v-else>
            <router-link to="login">登录 or 注册</router-link>
          </template>
        </div>
        <div class="site-shop" @mouseenter="requestcart()">
          <div href="#" class="cart">
            <em class="iconfont"></em>购物车
            <span class="J-sp"> {{ productnum }} </span>
          </div>
          <div class="j-menu">
            <ul v-if="productnum>0" class="cartlist-ul" ref="listHeight">
              <li v-for="cart in cartlists" :key="cart" class="cartlist-li">
                <div class="photo"><img :src=cart.GoodsSku.image alt=""></div>
                <div class="title">
                  <a>{{ cart.Good.title }} <span v-for="skusvalue in cart.GoodsSku.skus" :key="skusvalue"> {{
                    skusvalue }} </span></a>
                </div>
                <p class="price">{{ Number(cart.GoodsSku.pprice) }}元</p><el-icon><Close /></el-icon>
                <span>{{ cart.num }}</span>
                <div class="remove"><el-icon  @click="Deletegoods(cart.id)"><CloseBold /></el-icon></div>
              </li>
              <div class="cart-total">
                <div class="total">
                  <p>共{{productnum}}件商品</p>
                  <span class="price"><em>{{ Number(price) }}</em>元</span>
                </div>
                <router-link @click="Placeanorder()" class="btn-cart" to="/system/orders">去购物车结算</router-link>
              </div>
            </ul>
            <div v-else>
              <span>购物车中还没有商品，赶紧选购吧！</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { infoCart, addOrder, delCart } from '@/api/goods'
export default {
  data () {
    return {
      height: 0,
      show: false,
      cartlists: null,
      productnum: 0,
      price: 0,
      cart_ids: [],
      address_id: 1,
      order: []
    }
  },
  methods: {
    async Placeanorder () {
      try {
        const order = await addOrder({
          cart_ids: this.cart_ids,
          address_id: this.address_id
        })
        this.order = order
      } catch (error) {
      }
    },
    async Deletecart (ids) {
      try {
        await delCart({
          ids: ids
        })
      } catch (error) {
      }
    },
    async CartList () {
      try {
        const cartlist = await infoCart(1)
        this.cartlists = cartlist.data.data.list
        const data = this.cartlists
        data.productnum = 0
        data.price = 0
        data.cart_ids = []
        for (let i = 0; i < data.length; i++) {
          const skus = JSON.parse(data[i].GoodsSku.skus)// 解析商品规格
          data[i].GoodsSku.skus = skus.map(sku => sku.value)
          data.productnum += data[i].num// 计算以添加商品总数
          data.price += (data[i].GoodsSku.pprice * data[i].num)
          data.cart_ids.push(data[i].id)
        }
        this.productnum = data.productnum
        this.price = data.price.toFixed(2)
        this.cart_ids = data.cart_ids
      } catch (error) {
      }
    },
    // changeHeight (payload) {
    //   this.height = payload
    //   return `height: ${this.height}px`
    // },
    logout () {
      this.$router.push({ path: '/' })
      this.$message({ type: 'success', message: '退出成功' })
      localStorage.removeItem('token')
      localStorage.removeItem('userinfo')
      this.show = true
    },
    requestcart () {
      this.CartList()
    },
    addOrder () {
      this.Placeanorder()
    },
    Deletegoods (ids) {
      this.Deletecart(ids)
      this.CartList()
    }
  },
  computed: {
    ...mapGetters(['getUserinfo'])
  }
  // mounted () {
  //   this.height = document.querySelector('.cartlist-ul').offsetHeight
  // }
}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-between;
}

.right {
  display: flex;
}

.site-topbar {
  position: relative;
  height: 40px;
  color: #b0b0b0;
  background-color: #333;
  z-index: 30;
}

.site-topbar a {
  display: inline-flex;
  line-height: 40px;
  color: #b0b0b0;
  font-size: 12px;
}

.topbar-nav span {
  margin: 0 .3em;
  color: #424242;
}

.site-topbar a:hover {
  color: #fff;
}

.site-shop {
  width: 120px;
  height: 40px;
  margin-left: 15px;
  font-size: 12px;
  position: relative;
}

.site-shop .cart {
  height: 40px;
  line-height: 40px;
  display: block;
  color: #b0b0b0;
  background-color: #424242;
  text-align: center;
  position: relative;
}

.site-shop .j-menu {
  position: absolute;
  right: 0;
  top: 40px;
  width: 316px;
  height: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  overflow: hidden;
  transition: min-height .3s;
  background: #fff;
  color: #424242;
  line-height: 99px;
  text-align: center;
  z-index: 31;
}
.site-shop:hover .j-menu {
  height: auto;
  min-height: 99px;
}
.site-shop .j-menu .cart-total{
  padding: 10px 20px;
  background-color: #fafafafa;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-shop .j-menu .cart-total .total{
  font-size: 14px;
  color: #757575;
  text-align: left;
}
.site-shop .j-menu .cart-total .total p{
  height: 20px;
}
.site-shop .j-menu .cart-total .price {
  height: 40px;
  font-weight: 400;
  color: #ff6700;
}
.site-shop .j-menu .cart-total .btn-cart {
    float: right;
    width: 130px;
    padding: 0;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    color: #f5f5f5;
    background: #ff6700;
    display: flex;
    justify-content: center;
}
.site-shop .cart.cart-color {
  color: #ff6700;
  background-color: #fff;
}

.site-shop em {
  margin-right: 4px;
  vertical-align: -4px;
  font-size: 20px;
  line-height: 20px;
}

.J-sp {
  padding: 0 5px;
}

.topbar-info span {
  color: #424242;
}

.topbar-info .site-info-span {
  padding: 0 10px;
  margin: 0;
}

.topbar-info {
  height: 40px;
  line-height: 40px;
}

.topbar-nav .topbar-download {
  position: relative;
}

.topbar-download .appcode {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 124px;
  height: 0;
  background-color: #fff;
  text-align: center;
  margin-left: -55px;
  overflow: hidden;
  box-shadow: 0 1px 5px #aaa;
  font-size: 14px;
  color: #333;
  line-height: 1;
  transition: height .3s;
}

.appcode img {
  display: block;
  margin: 18px auto 12px;
  border: 0;
}

.topbar-nav .topbar-download.active::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -8px;
  border-width: 0 8px 8px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff;
}

.cartlist-ul .cartlist-li {
  width: auto;
  height: 60px;
  line-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.cartlist-ul .cartlist-li .photo {
  width: 60px;
  height: 60px;
}

.cartlist-ul .cartlist-li .title {
  height: 40px;
  margin: 10px 0;
  width: 123px;
}

.cartlist-ul .cartlist-li .title a {
  height: 20px;
  line-height: 20px;
  display: flex;
  flex-wrap: wrap;
  color: #000;
  text-align: left;
}

.cartlist-ul .cartlist-li .title:hover a {
  color: #ff6700;
}

.cartlist-ul .cartlist-li .price {
  text-align: end;
  width: 70px;
}

.cartlist-ul .cartlist-li .remove {
  width: 20px;
  text-align: center;
  margin: 2px;
}

.cartlist-ul .cartlist-li .remove .el-icon {
  display: none;
}

.cartlist-ul .cartlist-li:hover .remove .el-icon {
  display: block;
}

.cartlist-ul .cartlist-li .photo img {
  max-width: 100%;
}</style>
